<template>
  <div>
    <el-dialog  :visible.sync="previewDialog" :width="dialogWidth">
      <img  :src="picUrl" alt="" @load="onLoad">
    </el-dialog>
    <el-dialog
      title="退款记录"
      :close-on-click-modal="false"
      :visible.sync="showRefund">
      <el-form label-width="80px">
        <el-form-item label="订单号">
          <!--          <el-input v-model="dataForm.userId" placeholder="用户id"></el-input>-->

          {{ order.userId }}
        </el-form-item>
        <el-form-item label="用户id">
          {{ refund.userId }}
        </el-form-item>
        <el-form-item label="用户名">
          {{ refund.username }}
        </el-form-item>
        <el-form-item label="用户手机">
          {{ refund.userPhone }}
        </el-form-item>
        <el-form-item label="课程名字">
          {{ refund.courseName }}
        </el-form-item>
        <el-form-item label="课程id">
          {{ order.courseId }}
        </el-form-item>
        <el-form-item label="退款状态">
          {{ refund.status }}
        </el-form-item>

        <el-form-item label="课程类型">
          {{ refund.courseType }}

        </el-form-item>
        <el-form-item label="老师名字">
          <!--          <el-input v-model="dataForm.payPrice" placeholder="支付价格"></el-input>-->
          {{ order.realName }}}
        </el-form-item>
        <el-form-item label="流水号">
          <!--          <el-input v-model="dataForm.showStatus" placeholder="逻辑删除位【0删除，1存在】"></el-input>-->
          {{ refund.serialNum }}
        </el-form-item>
        <el-form-item label="申请时间">
          {{ refund.createTime }}
        </el-form-item>
        <el-form-item label="退款处理时间">
          {{ refund.finishTime }}
        </el-form-item>
        <el-form-item label="支付方式">
          {{ refund.payMode }}
        </el-form-item>
        <el-form-item label="操作员">
          <!--          <el-input v-model="dataForm.orderId" placeholder="自定义订单号"></el-input>-->
          {{ refund.operator }}
        </el-form-item>
        <el-form-item label="操作记录">
          <!--          <el-input v-model="dataForm.orderId" placeholder="自定义订单号"></el-input>-->
          {{ refund.remark }}
        </el-form-item>

        <el-form-item label="退款图片(点击图片预览)">

          <img  class="avatar" v-for="(item) in photos" :src="item" @click="handlePreview(item)" alt="">

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="showRefund = false">关闭</el-button>
        <!--      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>-->
    </span>
    </el-dialog>
  </div>

</template>

<script>

export default {

  data () {
    return {
      dialogWidth:0,
      previewDialog:false,
      picUrl:'',
      showRefund: false,
      order: {},
      refund: {},
      photos: []
    }
  },
  methods: {
    handlePreview(item){
      this.picUrl=item;
      this.previewDialog=true
    },
    onLoad(e){
      const img = e.target;
      let width = 0;
      if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
        width = img.width + 40;
      }
      this.dialogWidth = width + 'px';
    },
    init (order) {
      this.order = order
      this.showRefund = true
      // console.log(order)
      // this.photos = order.photos
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl(`/sys/refund/orderid/info/`),
          method: 'post',
          data: this.$http.adornData({orderId: order.orderId})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.refund = data.refund
            this.photos = JSON.parse(data.refund.refundScreenshots)
            // console.log(this.photos)
            // this.$message({
            //   message: '获取成功',
            //   type: 'success',
            //   duration: 1500,
            //   onClose: () => {
            //     this.refund = data.refund
            //   }
            // })
          } else {
            this.$message.error(data.msg)
          }
        })
      })

    }
  }
}
</script>
<style>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  margin-bottom: 2%;
}
</style>
